<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>背景图像的位置</title>

        <style type="text/css">
            h3 { text-align: center ; }

            .wrapper {
                width: 80% ;
                height: 400px ;
                background-color: #dedede ;
                background-image: url( liuyifei.jpg );
                background-repeat: no-repeat ;
                border: 1px solid blue ;
                margin: 15px auto ;
            }

            .first { background-position: left top ; }

            .second { background-position: right bottom ; }

            .third { background-position: center center ; }

            .fourth { background-position: 100px 100px ; }

            .fifth { background-position: -150px -50px ; }

            .sixth { 
                background-position: -161px -129px ; 
                width: 50px ;
                height: 50px ;
            }

            .seventh {
                width: 24px ;
                height: 24px ;
                border: 1px solid blue ;
                background-image: url(nicon.png);
                background-repeat: no-repeat ;
                background-position: 0 -48px ;
            }

            .seventh:hover {
                background-position: 0 -72px ;
            }
            
        </style>

    </head>
    <body>

        <h3>背景图像的位置</h3>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>

        <div class="wrapper fourth"></div>

        <div class="wrapper fifth"></div>

        <div class="wrapper sixth"></div>

        <hr>

        <div class="seventh"></div>
        
    </body>
</html>